<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../../assets/swiper8/swiper.min.css">
    <link rel="stylesheet" href="../../assets/css/base.css">
    <style>
        .box {
            width: 400px;
            height: 300px;
            border: 1px solid #ccc;
        }
        .loop-img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
        .loop-box{
            width: 500px;
            height: 300px;
            border: 10px solid green;
        }
        .loop-item{
            /* height: 300px; */
            height: 100%;
        }
        .swiper-slide.loading{
            width: 100%;
            height: 100%;
        }
        .swiper-slide.loading img{
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            object-position: center;
            background-color: #dedede;
        }
    </style>
</head>

<body>
    <div id="app">
        <pre v-pre class="note">
        1.插件组件的封装：针对三方JS功能库进行的独立化的完整逻辑定义组件
            + echarts 的组件封装
            + swiper 的组件封装
        </pre>
        <p>{{ option.series[0].data }}</p>
        <echart-box class="box" :option="option"></echart-box>
        <echart-box class="box" :option="option1"></echart-box>
        <input type="button" value="resetOptionData()" @click="resetOptionData()">

        <!-- ref 如果定义在组件标签上，记录的是组件实例对象 -->
        <echart-box class="box" :option="option2" ref="myChart"></echart-box>

        <input type="button" value="清空数据" @click="clearData()">
        <input type="button" value="模拟延迟加载数据" @click="loadData()">

        <hr>
        <swiper-box class="loop-box">
            <swiper-item class="loop-item" v-for="item in loops">
                <img class="loop-img" :src="'https://oa.itany.com/itmupload/'+item.path" alt="" srcset="">
            </swiper-item>
        </swiper-box>
        <hr>
        <swiper-box class="loop-box" :data="loops1" :option="{ loop:true }">
            <swiper-item class="loop-item" v-for="item in loops1">
                <img class="loop-img" :src="'https://oa.itany.com/itmupload/'+item.path" alt="" srcset="">
            </swiper-item>
        </swiper-box>
        <input type="button" value="loadLoopData()" @click="loadLoopData()">
    </div>

    <script src="../../assets/mockjs/mock-min.js"></script>
    <script type="module">
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        import EchartBox from "./components/EchartBox.js"
        import SwiperBox from "./components/SwiperBox.js"
        import SwiperItem from "./components/SwiperItem.js"


        createApp({
            components: {
                EchartBox,SwiperBox,SwiperItem
            },
            data() {
                return {
                    option: {
                        title: {
                            text: 'ECharts 入门示例'
                        },
                        tooltip: {},
                        legend: {
                            data: ['销量']
                        },
                        xAxis: {
                            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '销量',
                                type: 'bar',
                                data: [5, 20, 36, 10, 10, 20]
                            }
                        ]
                    },
                    option1: {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: 1048, name: 'Search Engine' },
                                    { value: 735, name: 'Direct' },
                                    { value: 580, name: 'Email' },
                                    { value: 484, name: 'Union Ads' },
                                    { value: 300, name: 'Video Ads' }
                                ]
                            }
                        ]
                    },
                    option2: {},
                    loops: [
                        {
                            "path": "1642413524332.png",
                            "url": "http://www.itany.org/newpc-test/education.html"
                        },
                        {
                            "path": "1642414397342.png",
                            "url": "http://www.itany.org/newpc-test/education.html"
                        },
                        {
                            "path": "1642405858377.png",
                            "url": "http://www.itany.org/newpc-test/java.html"
                        },
                        {
                            "path": "1645150125535.png",
                            "url": "web.html"
                        },
                        {
                            "path": "1645853338871.png",
                            "url": "java.html"
                        },
                        {
                            "path": "1645853393511.png",
                            "url": "web.html"
                        }
                    ],
                    loops1: []
                }
            },
            methods: {
                resetOptionData() {
                    this.option.series[0].data = Mock.mock({
                        "list|6": ["@integer(60, 300)"]
                    }).list
                    this.option1.series[0].data = [
                        { value: Mock.mock("@integer(300, 1200)"), name: 'Search Engine' },
                        { value: Mock.mock("@integer(300, 1200)"), name: 'Direct' },
                        { value: Mock.mock("@integer(300, 1200)"), name: 'Email' },
                        { value: Mock.mock("@integer(300, 1200)"), name: 'Union Ads' },
                        { value: Mock.mock("@integer(300, 1200)"), name: 'Video Ads' }
                    ]
                },
                clearData() {
                    this.option2 = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [],
                                type: 'line'
                            }
                        ]
                    }
                    this.$refs.myChart.showLoading();
                },
                loadData() {
                    this.option2 = {
                        xAxis: {
                            type: 'category',
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                data: [150, 230, 224, 218, 135, 147, 260],
                                type: 'line'
                            }
                        ]
                    }
                    this.$refs.myChart.hideLoading();
                },
                loadLoopData(){
                    this.loops1 = [
                        {
                            "path": "1642413524332.png",
                            "url": "http://www.itany.org/newpc-test/education.html"
                        },
                        {
                            "path": "1642414397342.png",
                            "url": "http://www.itany.org/newpc-test/education.html"
                        },
                        {
                            "path": "1642405858377.png",
                            "url": "http://www.itany.org/newpc-test/java.html"
                        },
                        {
                            "path": "1645150125535.png",
                            "url": "web.html"
                        },
                        {
                            "path": "1645853338871.png",
                            "url": "java.html"
                        },
                        {
                            "path": "1645853393511.png",
                            "url": "web.html"
                        }
                    ]
                }
            },
            mounted() {
                // this.$refs.myChart 访问的是组件实例 通过组件实例可以调用组件方法
                // console.log(this.$refs.myChart)
                this.$refs.myChart.showLoading();
            },
        }).mount("#app");
    </script>
</body>

</html>